<template>
	<view class="addressBook">
		<view class="services">
			<view v-for="(item, index) in lakesData" :key="index" :style="{ backgroundImage: `url(${item.url})` }" class="services_flex">
				<text>{{ item.name }}</text>
				<text>{{ item.value }}</text>
			</view>
			<view class="services_button">
				<u-button @click="oneRiverBtnOK" type="primary" :plain="true" text="一河一档"></u-button>
			</view>
		</view>
		<view class="waterQuality">
			<view class="topText">
				<uni-section title="水质达标次数统计" type="line"></uni-section>
			</view>
			<water message="Hello from I22ndex Page"></water>
		</view>
		<view class="theRiver">
			<view class="topText">
				<uni-section title="巡河统计情况" type="line"></uni-section>
			</view>
			<qiunCharts message="Hello from I22ndex Page"></qiunCharts>
		</view>
		<view class="eventType">
			<view class="topText">
				<uni-section title="河湖事件类型统计" type="line"></uni-section>
			</view>
			<pieEventType message="Hello from I22ndex Page"></pieEventType>
		</view>
	
	
	</view>
</template>

<script>
import qiunCharts from './components/qiunCharts.vue';
import pieEventType from './components/pieEventType';
import water from './components/water';
import { getCntRvInfo } from '@/api/mappages/lakes/lakes.js';
export default {
	components: {
		qiunCharts,
		pieEventType,
		water
	},
	data() {
		return {
			lakesData: []
		};
	},
	onLoad() {
		this.cntRvInfo();
	},
	onShow() {
		console.log('页面显示');
	},
	onReady() {
		console.log('页面初次渲染完成');
	},
	onHide() {
		console.log('页面隐藏');
	},
	onUnload() {
		console.log('页面卸载');
	},
	// onPullDownRefresh() {
	// 	console.log('用户下拉动作');
	// 	uni.stopPullDownRefresh(); // 记得停止下拉刷新动画
	// },
	// onReachBottom() {
	// 	console.log('页面上拉触底');
	// },
	methods: {
		cntRvInfo() {
			getCntRvInfo()
				.then((res) => {
					this.lakesData.push(
						{
							name: '河长数量',
							value: res.result.RvKprNum || '- -',
							url: '../../static/mappages/lakes/hc.png'
						},
						{
							name: '河段数量',
							value: res.result.RvSegNum || '- -',
							url: '../../static/mappages/lakes/hd.png'
						},
						{
							name: '河湖数量',
							value: res.result.RvLakeNum || '- -',
							url: '../../static/mappages/lakes/hh.png'
						},
						{
							name: '水库数量',
							value: res.result.ResNum || '- -',
							url: '../../static/mappages/lakes/sk.png'
						}
					);
				})
				.catch((error) => {
					this.lakesData.push(
						{
							name: '河长数量',
							value: '- -',
							url: '../../static/mappages/lakes/hc.png'
						},
						{
							name: '河段数量',
							value: '- -',
							url: '../../static/mappages/lakes/hd.png'
						},
						{
							name: '河湖数量',
							value: '- -',
							url: '../../static/mappages/lakes/hh.png'
						},
						{
							name: '水库数量',
							value: '- -',
							url: '../../static/mappages/lakes/sk.png'
						}
					);
				});
		},
		oneRiverBtnOK() {
			this.$tab.navigateTo('/mappages/lakes/oneRiver/oneRiver');
		}
	}
};
</script>

<style lang="scss">
.u-button {
	width: 300rpx;
	border-radius: 20rpx;
}
.addressBook {
	margin-top: 10rpx;
}

.services {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 20rpx 10rpx;
	background-color: #fff;
}

.services_flex {
	flex: 1 1 25%;
	max-width: 23%;
	height: 200rpx;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 30rpx 0px 0px 20rpx;
	color: #fff;
}
.services_flex text:nth-child(1) {
	letter-spacing: 2rpx;
}
.services_flex text:nth-child(2) {
	font-size: 30rpx;
	margin-top: 10rpx;
	font-weight: 600;
}

.services_button {
	margin: 40rpx 0 20rpx 0;
}

.theRiver {
	margin-top: 15rpx;
	background-color: #fff;
}
.eventType {
	margin-top: 15rpx;
	background-color: #fff;
}
.waterQuality {
	margin-top: 15rpx;
	background-color: #fff;
}
</style>
